import {
  ElButton,
  ElCol,
  ElDialog,
  ElForm,
  ElFormItem,
  ElRow,
  ElSpace
} from 'element-plus'
import { isEmpty } from 'lodash-unified'
import { computed, defineComponent, reactive, toRefs } from 'vue'

import type { IOperLogPageItem } from '@/apis'
import { fmtDate } from '@/utils'

import { bizStatusObj, bizTypeObj } from '../../hooks'

export default defineComponent({
  name: 'DetailDialog',
  setup() {
    const state = reactive({
      visible: false,
      data: {} as IOperLogPageItem
    })

    const moduleName = computed(() => {
      if (isEmpty(state.data)) {
        return ''
      }
      return `${state.data.title} / ${bizTypeObj[state.data.bizType]}`
    })

    const loginInfo = computed(() => {
      if (isEmpty(state.data)) {
        return ''
      }
      return `${state.data.operName} / ${state.data.operIp} / ${state.data.operLocation}`
    })

    const costTime = computed(() => {
      if (isEmpty(state.data)) {
        return ''
      }
      return `${state.data.costTime}毫秒`
    })

    function open(data: IOperLogPageItem) {
      state.visible = true
      state.data = data
    }

    function handleClose() {
      state.visible = false
      state.data = Object.create(null)
    }

    return {
      ...toRefs(state),
      moduleName,
      loginInfo,
      costTime,
      open,
      handleClose
    }
  },
  render() {
    return (
      <ElDialog
        v-model={this.visible}
        title="操作日志详细"
        width="800px"
        destroyOnClose
      >
        {{
          default: () => (
            <ElForm>
              <ElRow>
                <ElCol span={12}>
                  <ElFormItem label="操作模块：">
                    <span>{this.moduleName}</span>
                  </ElFormItem>
                </ElCol>
                <ElCol span={12}>
                  <ElFormItem label="操作方法：">
                    <span>{this.data.method}</span>
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElRow>
                <ElCol span={12}>
                  <ElFormItem label="登录信息：">
                    <span>{this.loginInfo}</span>
                  </ElFormItem>
                </ElCol>
                <ElCol span={12}>
                  <ElFormItem label="请求方法：">
                    <span>{this.data.requestMethod}</span>
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElRow>
                <ElCol span={24}>
                  <ElFormItem label="请求地址：">
                    <span>{this.data.requestUrl}</span>
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElRow>
                <ElCol span={24}>
                  <ElFormItem label="请求参数：">
                    <span>{this.data.requestParams}</span>
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElRow>
                <ElCol span={24}>
                  <ElFormItem label="返回参数：">
                    <span>{this.data.requestResult}</span>
                  </ElFormItem>
                </ElCol>
              </ElRow>
              <ElRow>
                <ElCol span={8}>
                  <ElFormItem label="操作状态：">
                    <span>{bizStatusObj[this.data.status]}</span>
                  </ElFormItem>
                </ElCol>
                <ElCol span={8}>
                  <ElFormItem label="消耗时间：">
                    <span>{this.costTime}</span>
                  </ElFormItem>
                </ElCol>
                <ElCol span={8}>
                  <ElFormItem label="操作时间：">
                    <span>{fmtDate(this.data.operTime)}</span>
                  </ElFormItem>
                </ElCol>
              </ElRow>
            </ElForm>
          ),
          footer: () => (
            <ElSpace>
              <ElButton onClick={this.handleClose}>关闭</ElButton>
            </ElSpace>
          )
        }}
      </ElDialog>
    )
  }
})
